<template>
  <div class="product clearfix">
    <carousel></carousel>
    <div class="hoverTree">
      <ul>
        <li :class="item.bool ? 'active' : 'fl'" @mousemove="plateFun(i)" v-for="(item, i) in data" :key="i">
          <span class="item" :style="{backgroundImage: 'url('+(item.bool ? item.imgB : item.img)+')'}"></span>
          <span class="des">绑定车牌</span>
        </li>
      </ul>
      <span v-show="item.bool" v-for="item in data" :key="item.key">{{item.title}}<br/>{{item.title2}}</span>
    </div>
    <div class="indicator">
      <img :src="item.url" alt="" v-show="item.bool" v-for="(item, i) in data" :key="i">
    </div>
  </div>
</template>

<script>
import Carousel from '../components/carousel.vue'
import plateImg from '../assets/image/prouduct_center/plateImg.png'
import plateImgb from '../assets/image/prouduct_center/plateImgb.png'
import parkingLotImg from '../assets/image/prouduct_center/parkingLotImg.png'
import parkingLotImgb from '../assets/image/prouduct_center/parkingLotImgb.png'
import appointmentImg from '../assets/image/prouduct_center/appointmentImg.png'
import appointmentImgb from '../assets/image/prouduct_center/appointmentImgb.png'
import mapNavigationImg from '../assets/image/prouduct_center/mapNavigationImg.png'
import mapNavigationImgb from '../assets/image/prouduct_center/mapNavigationImgb.png'
import noFeelingImg from '../assets/image/prouduct_center/noFeelingImg.png'
import noFeelingImgb from '../assets/image/prouduct_center/noFeelingImgb.png'
import otherImg from '../assets/image/prouduct_center/otherImg.png'
import otherImgb from '../assets/image/prouduct_center/otherImgb.png'


export default {
  data() {
    return {
      data:[
        {bool: true,imgB: plateImgb, img: plateImg, title: '绑定车牌，实现人工智能，', title2: '无感支付', url: 'http://www.zhuyitech.com/static/img/iphone_bound.de5ed5a.png'},
        {bool: false,imgB: parkingLotImgb, img: parkingLotImg, title: '附近搜索，', title2: '快速知道空余车位', url: 'http://www.zhuyitech.com/static/img/iphone_search.6e749fc.png'},
        {bool: false,imgB: appointmentImgb, img: appointmentImg, title: '车位预约，无需分秒必争，', title2: '即到即停', url: 'http://www.zhuyitech.com/static/img/iphone_appointment.80c74c0.png'},
        {bool: false,imgB: mapNavigationImgb, img: mapNavigationImg, title: '复杂停车场不再绕，', title2: '一线直达', url: 'http://www.zhuyitech.com/static/img/iphone_navigate.f1f3efa.png'},
        {bool: false,imgB: noFeelingImgb, img: noFeelingImg, title: '付款不停车，', title2: '账单提醒拒绝遗漏', url: 'http://www.zhuyitech.com/static/img/iphone_pay.f38303d.png'},
        {bool: false,imgB: otherImgb, img: otherImg, title: '违章查询、车辆买卖、车品商城，', title2: '更多车主服务正在上线', url: 'http://www.zhuyitech.com/static/img/iphone_other.54556a4.png'}
      ]
    }
  },
  components: {Carousel},
  methods: {
    plateFun(e) {
      console.log(e)
      this.data.forEach(res => {
        res.bool = false
      })
      this.data[e].bool = true
    },
  }
}
</script>

<style lang="scss" scoped>
.product {
  margin-top: 80px;
  text-align: center;
  background-color: #fafafa;
  .indicator {
    float: left;
    margin-top: 150px;
    margin-bottom: 150px;
    margin-left: 25%;
  }
  .hoverTree {
    float: right;
    margin-top: 100px;
    margin-bottom: 150px;
    margin-right: 16%;
     
    > span {
      display: block;
      text-align: left;
      margin-top: 60px;
      float: left;
      color: #222;
      line-height: 60px;
      font-size: 40px;
    }
  }
  .hoverTree > ul {
    margin-top: 66px;

    > li {
      display: inline-block;
      width: 93px;
      text-align: center;
      padding-bottom: 15px;
      margin-right: 15px;
      box-sizing: border-box;

      > .item {
        display: inline-block;
        width: 50px;
        height: 50px;
        background-size: contain;
      }

      > .des {
        display: inline-block;
        padding-bottom: 15px;
        margin-top: 15px;
      }
    }

    .fl {    
      color: #b4b4b4;
    }

    .active {
      color: #3296FA;
      border-bottom: 4px solid #3296FA;
    }
  }
}
</style>